a {
  position: relative;
  color: var(--text-link);
  text-decoration: none;
}
a:hover {
  color: var(--text-link-hover);
  text-decoration: none;
}

/* This makes the animation */
a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-link-hover);
  bottom: -0.2rem;
  left: 0;
  transform: scaleX(0);
  visibility: hidden;
  transition: transform 0.3s ease;
}
a:hover::before {
  transform: scaleX(1);
  visibility: visible;
}


/*removes link icon from below images */
a.link-external::after {
  visibility: hidden;
  content: "";
}
